import React, { Component } from 'react';
import TodoListItem from './TodoListItem';
import { getUuid } from './getUuid.js';
import { handleNowTime } from './getTIME';
import './index.css';
const STATUS_ITEM = 0;
class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [{
        content: "睡觉",
        status: STATUS_ITEM,
        startTime: handleNowTime(new Date()),
        uuid: getUuid()
      },
      {
        content: "做作业",
        status: STATUS_ITEM,
        startTime: handleNowTime(new Date()),
        uuid: getUuid()

      }, {
        content: "学习",
        status: STATUS_ITEM,
        startTime: handleNowTime(new Date()),
        uuid: getUuid()
      }, {
        content: "基于B/S开发的一站式班级管理系统和代码评测系统",
        status: 0,
        startTime: handleNowTime(new Date()),
        uuid: getUuid()
      }
      ],
      finished: 0,
      inputValue: ''
    };
  }
  handleChangeValue = (event) => {
    const { value } = event.target;
    this.setState({
      inputValue: value
    });
  }

  handleAddTask = () => {
    const { inputValue } = this.state;
    if (!inputValue) {
      alert("输入为空，请重新输入待办事项");
      return;
    }
    let nowTime = new Date();
    const startTime = handleNowTime(nowTime);
    let Uuid = getUuid();
    var obj = {
      content: inputValue,
      status: STATUS_ITEM,
      startTime: startTime,
      uuid: Uuid
    };
    const { list } = this.state;
    list.push(obj);
    this.setState({
      list,
      inputValue: ''
    });
  }
  // 更新已完成的事项
  updateFinished = () => {
    const { list } = this.state;
    let finishedTask = 0;
    list.forEach((item) => {
      if (item.status === !STATUS_ITEM) {
        ++finishedTask;
      }
    });
    this.setState({
      finished: finishedTask
    });
  }

  handleClickDelete = (Uuid) => {
    const { list } = this.state;
    const List = list.filter(item =>
      item.uuid !== Uuid);
    this.setState({
      list: List
    });
  }
  enterPress = (event) => {
    if (event.key === 'Enter') {
      this.handleAddTask();
      event.target.value = ''
    }
  }

  render() {
    const { list } = this.state;
    const { finished } = this.state;
    const { inputValue } = this.state;
    return (
      <div className="container">
        <h1>TO DO LIST</h1>
        <hr></hr>
        <div className="listItem">
          <TodoListItem
            list={list}
            handleClickDelete={this.handleClickDelete}
            updateFinished={this.updateFinished}
          />
          <div className="item-count">
            {finished}
            已完成任务/
            {list.length}
            任务总数
          </div>
          <div className="addItem">
            <input
              className="add-input"
              type="text"
              placeholder="Add your item……"
              onKeyPress={this.enterPress}
              value={inputValue}
              onChange={this.handleChangeValue}
            />
            <button className="addButton"
              onClick={this.handleAddTask}
            >
              添加
          </button>
          </div>

        </div>
      </div>
    );
  }
}

export default TodoList;
